<template>
  <div class="account_total_box_info">
    <div class="account_total_box_info_title">
      <p>{{ lang.account_total_title }}</p>
      <NuxtImg
        src="/images/layout/down_arrow.png"
        class="down"
        :class="{ open_arrow: isOpen }"
        @click="toggleOpen"
      />
    </div>
    <ul :class="{ hidden_list: !isOpen }">
      <li v-for="item in items" :key="item.id">
        <div>{{ item.label }}</div>
        <div>{{ userStore.moneyUnit }} {{ item.value }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("setting");
const userStore = useUserStore();

const items = [
  { id: 1, label: lang.account_total_deposit, value: "0.00" },
  { id: 2, label: lang.account_total_withdraw, value: "0.00" },
  { id: 3, label: lang.account_total_play, value: "0.00" },
  { id: 4, label: lang.account_total_bonus, value: "0.00" },
  { id: 5, label: lang.account_total_commission, value: "0.00" },
];

const isOpen = ref(true);
const toggleOpen = () => {
  isOpen.value = !isOpen.value;
};
</script>

<style scoped lang="scss">
.account_total_box_info {
  box-sizing: border-box;
  height: auto;
  padding: 0.26rem 0.3rem;
  padding-bottom: 0;
  border-radius: 0.3rem;
  color: var(--theme-neutral1);
}
.account_total_box_info_title {
  margin-bottom: 0.4rem;
  color: var(--theme-neutral1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.44rem;
}
.account_total_box_info_title :deep(img) {
  width: 0.6rem;
  height: 0.6rem;
  transition: transform 0.2s ease;
}
.open_arrow {
  transform: rotate(-180deg);
}
ul {
  list-style: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform: scaleY(1);
  transform-origin: top;
  opacity: 1;
}
.account_total_box_info ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.28rem;
  font-weight: 100;
  font-size: 0.34rem;
  color: #d390ff;
  div:nth-child(2) {
    color: #ffd700;
  }
}
.hidden_list {
  transform: scaleY(0);
  opacity: 0;
  height: 0; /* 收起时布局高度为0 */
  pointer-events: none; /* 避免交互 */
}
</style>
